<template>
  <div class="all">
    <el-card>
      <div slot="header" class="clearfix">
        <div class="title">
          <el-row>
            <el-col :span="20">
              <div class="title-text">
                {{titleName}}
              </div>
            </el-col>
            <el-col :span="4">
              <div class="title-icon">
                <i class="el-icon-warning-outline"></i>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="quantity-style" v-if='quantity' @click="clickQuantity">{{ quantity | formatting }}</div>
      <div class="quantity-style" v-if='quanPercent'>{{ quanPercent }}%</div>
      <div class="quantity-style" v-if='quanPercent == 0'>0</div>
      <div class="quantity-style" v-if='quanMoney'>{{ quanMoney }}￥</div>
    <!--  <div style='width: 100%;height: 97px;'>
        <div style='line-height: 70px;' v-if='percentage !== 0'>
          <a-progress
            :stroke-color="{
                '0%': '#74bcff',
                '100%': '#3aa1ff',
              }"
            :percent="percentage"
          />
        </div>
        <div style='line-height: 70px;' v-if='percentage == 0'>
          <a-progress
            :stroke-color="{
                '0%': '#74bcff',
                '100%': '#3aa1ff',
              }"
            :percent="0"
          />
        </div>
        <div class="foot"  v-if='percentage !== 0 || percentage == 0'>
          <span>
            <span class="foot-text"  v-if='leftName'>{{leftName}}：</span>
            <span v-if='leftValue'>{{leftValue | formatting}}</span>
          </span>
          <span style='float: right'>
            <span class="foot-text"  v-if='rightName'>{{rightName}}：</span>
            <span v-if='rightValue'>{{rightValue | formatting}}</span>
          </span>
        </div>
      </div>-->
    </el-card>
  </div>
</template>

<script>

  export default {
    name: "Historgram",
    props:{
      //标头
      titleName:String,
      //中间数量
      quantity:Number,
      //中间百分比
      quanPercent:Number,
      //中间钱数
      quanMoney: Number,
      //底部名字
      leftName:String,
      rightName:String,
      //底部数量
      leftValue:Number,
      rightValue:Number,
      //图表数组
      dataList:Array,
      //图表ID
      id:String,
      //进度
      percentage:Number,
      item:Object
    },
    watch:{
      percentage(newName, oldName){
        return newName
      }
    },
    filters:{
      formatting(num){
        num = num.toString().split("."); // 分隔小数点
        var arr = num[0].split("").reverse(); // 转换成字符数组并且倒序排列
        var res = [];
        for (var i = 0, len = arr.length; i < len; i++) {
          if (i % 3 === 0 && i !== 0) {
            res.push(","); // 添加分隔符
          }
          res.push(arr[i]);
        }
        res.reverse(); // 再次倒序成为正确的顺序
        if (num[1]) {
          // 如果有小数的话添加小数部分
          res = res.join("").concat("." + num[1]);
        } else {
          res = res.join("");
        }
        return res;
      }
    },
    mounted() {},
    methods:{
      clickQuantity() {
        this.$emit('clickQuantity', this.item)
      }
    }
  }
</script>

<style scoped>
  .title-text{
    color: #8c8c8c;
  }
  .quantity-style{
    font-size: 30px;
    cursor: pointer;
    /*font-weight: bold;*/
  }
  .foot{
    float: left;
    width: 100%;
    height: 37px;
    padding: 5px 0;
    border-top: solid 1px #e8e8e8;
    box-sizing: border-box;
  }
  .title-icon{
    float: right;
    display: inline-block;
    margin-top: 3.5px;
  }
  .main{
    width: 100%;
    margin-left: -40px;
    height: 70px;
  }
  .foot-text{
    display:inline-block;
    padding-bottom: 5px;
  }
  >>> .el-card__header{
    border-bottom: none !important;
    padding: 18px 20px 5px 20px;
  }
  >>> .el-card__body{
    padding: 10px 20px;
  }
  >>> .el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover{
    box-shadow: none !important;
  }
</style>
